<template>
  <el-dialog title="添加经纪" width="80%" :visible="isShow" @close="closeFn">
    <el-form label-width="80px">
      <el-form-item label="名称">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="formData.email" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="formData.phone" />
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="formData.address" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="formData.desc" type="textarea" />
      </el-form-item>
      <el-form-item label="封面">
        <uploadImg ref="imgref" />
      </el-form-item>
    </el-form>
    <!-- 封面 -->

    <!-- 底部 -->

    <span slot="footer">
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="addFn">确认</el-button>
        <el-button @click="closeFn">取消</el-button>
      </el-row>

    </span>
  </el-dialog>
</template>

<script>
import { deitAgents } from '@/api/agents'
import { addAgents } from '@/api/agents'
import { getOneAgents } from '@/api/agents'

// import uploadImg from './upload-Img.vue'
export default {
  // components: {
  //   uploadImg: uploadImg
  // },
  props: {
    isShow: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      formData: {
        image: '', // 图片
        name: '', // 名称
        email: '', // 邮箱
        phone: '', // 电话
        address: '', // 地址
        desc: '' // 介绍
      }
    }
  },
  methods: {
    // 删除

    // 编辑数据回填
    async getOneAgents(id) {
      const res = await getOneAgents(id)
      // console.log('res: ', res)
      this.formData = res.data
      // console.log(11, this.formData)
      this.$refs.imgref.fileList.push(
        { url: this.formData.image }
      )
      // console.log(this.$refs.imgref.fileList)
      // this.$refs.imgref.fileList[0].url = this.formData.image
      // 隐藏进度条
      this.$refs.imgref.percentage = 100
    },
    // 添加
    async addFn() {
      if (this.formData.id) {
        // 编辑
        console.log(this.formData)
        // 调用接口
        this.formData.image = await this.$refs.imgref.fileList[0].url
        console.log('this.$refs.imgref.fileList.url: ', this.$refs.imgref.fileList[0].url)
        await deitAgents(this.formData)
        // console.log('res: ', res)
      } else {
        // 添加
        // 图片
        this.formData.image = await this.$refs.imgref.fileList[0].url
        // 调用接口数据新增
        await addAgents(this.formData)
      }

      // 关闭弹框
      this.closeFn()
      // 刷新页面
      this.$emit('getAgentsList')
    },
    // 关闭弹框
    closeFn() {
      // 刷新页面

      // 清空图片
      this.$refs.imgref.removeFn()
      // 关闭弹框
      this.$emit('update:isShow', false)

      // 清空数据
      this.formData = {
        image: '', // 图片
        name: '', // 名称
        email: '', // 邮箱
        phone: '', // 电话
        address: '', // 地址
        desc: '' // 介绍
      }
    }
  }

}
</script>

<style scoped>

</style>
